/*
 * @Author: 脉迈
 * @Date: 2021-09-15 18:37:50
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-27 18:05:00
 */
import React, { Fragment, useState } from "react";
import styles from "./SettingBox.module.scss";
import { Row, Col, InputNumber, Input, Button, Select, Popover } from "antd";
import { useRecoilState } from "recoil";
import {
  pageComponentsState,
  blockActiveIndexState,
  componentActiveIndexState,
} from "store/modules/element";
import { SketchPicker } from "react-color";
import FontType from "./components/FontType/FontType";
import StyleType from "./components/StyleType/StyleType";

const { Option } = Select;

export default function SettingBox() {
  const [pageComponentList, setPageComponentList] =
    useRecoilState(pageComponentsState);
  const [blockActiveIndex] = useRecoilState(blockActiveIndexState);
  const [componentActiveIndex, setComponentActiveIndex] = useRecoilState(
    componentActiveIndexState
  );
  const [backgroundColor, setBackgroundColor] = useState();
  const [backgroundVisible, setBackgroundVisible] = useState(false);
  /**
   *
   * @param type 类型
   * @param value
   * @description 动态修改属性
   */
  const handleChange = (
    type: string,
    propType: string,
    attr: string,
    value: any
  ) => {
    let newPageComponentList = JSON.parse(JSON.stringify(pageComponentList));

    if (propType === "properties") {
      if (type === "block") {
        newPageComponentList[blockActiveIndex].style[attr] = value;
        setPageComponentList(JSON.parse(JSON.stringify(newPageComponentList)));
      }
      if (type === "props") {
        newPageComponentList[blockActiveIndex].children[
          componentActiveIndex
        ].properties[attr].value = value;
        setPageComponentList(JSON.parse(JSON.stringify(newPageComponentList)));
      }
      if (type === "style") {
        newPageComponentList[blockActiveIndex].children[
          componentActiveIndex
        ].style[attr] = value;
        setPageComponentList(JSON.parse(JSON.stringify(newPageComponentList)));
      }
    } else if (propType === "properStyle") {
      if (type === "props") {
        newPageComponentList[blockActiveIndex].children[
          componentActiveIndex
        ].properStyle[attr].value = value;
        setPageComponentList(JSON.parse(JSON.stringify(newPageComponentList)));
      }
    }
  };

  const renderPropsItem = (item: any, type: string) => {
    switch (item.editorType) {
      case "Input":
        return (
          <Input
            value={item.value}
            onChange={(e) => {
              handleChange("props", type, item.attr, e.target.value);
            }}
          />
        );

      case "FontType":
        return (
          <Fragment>
            <FontType></FontType>
          </Fragment>
        );
      case "StyleType":
        return (
          <Fragment>
            <StyleType></StyleType>
          </Fragment>
        );
      case "Select":
        return (
          <Fragment>
            <Select
              style={{ width: "200px" }}
              value={item.value}
              onChange={(value: string) => {
                handleChange("props", type, item.attr, value);
              }}
            >
              {item.options.map((item: any) => {
                return <Option value={item.value}>{item.label}</Option>;
              })}
            </Select>
          </Fragment>
        );
      default:
        return <>{item.editorType}</>;
    }
  };

  const renderProps = (item: any, type: string) => {
    return (
      <Fragment>
        <Col span={6} className={styles.propItem}>
          {item.label}
        </Col>
        <Col span={16} className={styles.propItem}>
          {renderPropsItem(item, type)}
        </Col>
      </Fragment>
    );
  };

  const handleChangeComplete = (color: any) => {
    let { rgb } = color;
    let { r, g, b, a } = rgb;
    let newPageComponentList = JSON.parse(JSON.stringify(pageComponentList));

    let blockObject = newPageComponentList[blockActiveIndex];
    blockObject.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
    setBackgroundColor(color);
    setPageComponentList(newPageComponentList);
  };

  const deleteComponent = () => {
    let newPageComponentsState = JSON.parse(JSON.stringify(pageComponentList));

    newPageComponentsState[blockActiveIndex].children.splice(
      componentActiveIndex,
      1
    );

    setPageComponentList(newPageComponentsState);
    setComponentActiveIndex(0);
  };

  return (
    <div className={styles.main}>
      {pageComponentList.length ? (
        <div className={styles.item}>
          <div className={styles.title}>模块</div>
          <Row className={styles.propItem}>
            <Col span={6}>高度</Col>
            <Col span={18}>
              <InputNumber
                value={
                  pageComponentList.length &&
                  pageComponentList[blockActiveIndex].style.height
                }
                onChange={(value) => {
                  handleChange("block", "properties", "height", value);
                }}
              />
            </Col>
          </Row>
          <Row className={styles.propItem}>
            <Col span={6}>背景颜色</Col>
            <Col span={18}>
              <Popover
                title="Title"
                trigger="click"
                visible={backgroundVisible}
                onVisibleChange={() => {
                  setBackgroundVisible(!backgroundVisible);
                }}
                content={
                  <SketchPicker
                    color={backgroundColor}
                    onChangeComplete={handleChangeComplete}
                  />
                }
              >
                <div
                  style={{
                    backgroundColor: JSON.parse(
                      JSON.stringify(pageComponentList)
                    )[blockActiveIndex].style.backgroundColor,
                  }}
                  className={styles.blockBackground}
                ></div>
              </Popover>
            </Col>
          </Row>
          <Row className={styles.propItem}>
            <Col span={6}>背景图片</Col>
            <Col span={18}>
              <Input
                allowClear
                value={
                  JSON.parse(JSON.stringify(pageComponentList))[
                    blockActiveIndex
                  ].style.backgroundImage
                }
                onChange={(e) => {
                  let newPageComponentList = JSON.parse(
                    JSON.stringify(pageComponentList)
                  );
                  let blockObject = newPageComponentList[blockActiveIndex];
                  blockObject.style.backgroundImage = e.target.value;
                  setPageComponentList(newPageComponentList);
                }}
              />
            </Col>
          </Row>
          <Row className={styles.propItem}>
            <Col span={6}>图片尺寸</Col>
            <Col span={18}>
              <Select
                defaultValue="cover"
                value={
                  JSON.parse(JSON.stringify(pageComponentList))[
                    blockActiveIndex
                  ].style.backgroundSize
                }
                style={{ width: 120 }}
                onChange={(value) => {
                  let newPageComponentList = JSON.parse(
                    JSON.stringify(pageComponentList)
                  );
                  let blockObject = newPageComponentList[blockActiveIndex];
                  blockObject.style.backgroundSize = value;
                  setPageComponentList(newPageComponentList);
                }}
              >
                <Option value="auto">auto</Option>
                <Option value="inherit">inherit</Option>
                <Option value="initial">initial</Option>
                <Option value="revert">revert</Option>
                <Option value="cover">cover</Option>
                <Option value="contain">contain</Option>
                <Option value="unset">unset</Option>
              </Select>
            </Col>
          </Row>
        </div>
      ) : (
        <></>
      )}

      <div className={styles.item}>
        {JSON.parse(JSON.stringify(pageComponentList)).length &&
        JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex].children
          .length ? (
          <>
            <div className={styles.title}>属性</div>
            <Row>
              {Object.values(
                JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex]
                  .children[componentActiveIndex].properties
              ).map((item: any, index: number) => {
                return renderProps(item, "properties");
              })}
            </Row>
          </>
        ) : (
          <></>
        )}
      </div>

      <div className={styles.item}>
        {JSON.parse(JSON.stringify(pageComponentList)).length &&
        JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex].children
          .length ? (
          <>
            <div className={styles.title}>样式</div>
            <Row>
              {Object.values(
                JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex]
                  .children[componentActiveIndex].properStyle
              ).map((item: any, index: number) => {
                return renderProps(item, "properStyle");
              })}
            </Row>
          </>
        ) : (
          <></>
        )}
      </div>

      <div className={styles.item}>
        <>
          {JSON.parse(JSON.stringify(pageComponentList)).length &&
          JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex]
            .children.length ? (
            <Fragment>
              <div className={styles.title}>布局</div>
              <>
                <Row>
                  <Fragment>
                    <Col span={6} className={styles.propItem}>
                      位置
                    </Col>
                    <Col span={18} className={styles.propItem}>
                      <Row>
                        <Col span={12}>
                          <InputNumber
                            addonBefore="横轴"
                            value={
                              JSON.parse(JSON.stringify(pageComponentList))[
                                blockActiveIndex
                              ].children[componentActiveIndex].style.left
                            }
                            onChange={(value) => {
                              handleChange(
                                "style",
                                "properties",
                                "left",
                                value
                              );
                            }}
                          />
                        </Col>
                        <Col span={12}>
                          <InputNumber
                            addonBefore="纵轴"
                            value={
                              JSON.parse(JSON.stringify(pageComponentList))[
                                blockActiveIndex
                              ].children[componentActiveIndex].style.top
                            }
                            onChange={(value) => {
                              handleChange("style", "properties", "top", value);
                            }}
                          />
                        </Col>
                      </Row>
                    </Col>
                  </Fragment>
                </Row>
                <Row>
                  <Fragment>
                    <Col span={6} className={styles.propItem}>
                      尺寸
                    </Col>
                    <Col span={18} className={styles.propItem}>
                      <Row>
                        <Col span={12}>
                          <InputNumber
                            addonBefore="宽度"
                            value={
                              JSON.parse(JSON.stringify(pageComponentList))[
                                blockActiveIndex
                              ].children[componentActiveIndex].style.width
                            }
                            onChange={(value) => {
                              handleChange(
                                "style",
                                "properties",
                                "width",
                                value
                              );
                            }}
                          />
                        </Col>
                        <Col span={12}>
                          <InputNumber
                            addonBefore="高度"
                            value={
                              JSON.parse(JSON.stringify(pageComponentList))[
                                blockActiveIndex
                              ].children[componentActiveIndex].style.height
                            }
                            onChange={(value) => {
                              handleChange(
                                "style",
                                "properties",
                                "height",
                                value
                              );
                            }}
                          />
                        </Col>
                      </Row>
                    </Col>
                  </Fragment>
                </Row>
                <Button
                  type="primary"
                  block
                  onClick={() => {
                    deleteComponent();
                  }}
                >
                  删除本组件
                </Button>
              </>
            </Fragment>
          ) : (
            <></>
          )}
        </>
      </div>
    </div>
  );
}
